<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <title>Auto-hiding fixed navbar for Bootstrap</title>



   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">

   <link rel="stylesheet" type="text/css" href="src/css/normalize.css" />

   <link rel="stylesheet" type="text/css" href="src/css/demo.css" />

   <link rel="stylesheet" type="text/css" href="src/css/component.css" />



    <style>

      .demo-long {

        margin-top: 200px;

        margin-bottom: 400px;

      }

    </style>

  </head>



  <body>



    <div class="navbar navbar-default navbar-fixed-top" role="navigation" style="height: 70px;">

      <div class="container">

        <div class="navbar-collapse collapse">
          <div class="col-md-10">
            <nav class="menu menu--prospero">
              <ul class="menu__list">
                <li class="menu__item menu__item--current"><a href="#" class="menu__link">发现</a></li>
                <li class="menu__item"><a href="#" class="menu__link">创作</a></li>
                <li class="menu__item"><a href="#" class="menu__link">造物</a></li>
                <li class="menu__item"><a href="#" class="menu__link">赛事</a></li>
                <li class="menu__item"><a href="#" class="menu__link">Wiki百科</a></li>
                <li class="menu__item "><a href="#" class="menu__link">学校</a></li>
                <li class="menu__item "><a href="#" class="menu__link">学习平台</a></li>
              </ul>
            </nav>
          </div>

          <div class="col-md-2 pull-right logout"> 
              <a href="#"><img class="img-circle" src="img/logout.jpg" style="width:35px;height:35px;" alt="头像"/>&nbsp; 登录/注册</a>
          </div>

        </div>

      </div>
    </div>



    <div class="container">



      <p class="demo-long">

        Long content...

      </p>

      <p class="demo-long">

        Long content...

      </p>

      <p class="demo-long">

        Long content...

      </p>

      <p class="demo-long">

        Long content...

      </p>

      <p class="demo-long">

        Long content...

      </p>

      <p class="demo-long">

        Long content...

      </p>



    </div>



    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>

    <script src="src/js/clipboard.min.js"></script>

    <script src="src/js/jquery.bootstrap-autohidingnavbar.js"></script>


    <script src="src/js/classie.js"></script>

    <script type="text/javascript">
      (function() {
      [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
        var menuItems = menu.querySelectorAll('.menu__link'),
          setCurrent = function(ev) {
            ev.preventDefault();

            var item = ev.target.parentNode; // li

            // return if already current
            if (classie.has(item, 'menu__item--current')) {
              return false;
            }
            // remove current
            classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
            // set current
            classie.add(item, 'menu__item--current');
          };

        [].slice.call(menuItems).forEach(function(el) {
          el.addEventListener('click', setCurrent);
        });
      });

      [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
        link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
        new Clipboard(link);
        link.addEventListener('click', function() {
          classie.add(link, 'link-copy--animate');
          setTimeout(function() {
            classie.remove(link, 'link-copy--animate');
          }, 300);
        });
      });
    })(window);
    </script>


    <script>

      $("div.navbar-fixed-top").autoHidingNavbar();

    </script>